<template>

	<view class="add-address">
		<view class="box">
			<view class="card">
				<view class="u-f-ajc">
					<text>联系人</text>
					<input class="uni-input" focus placeholder="姓名" v-model="parameter.name" @input="clearInput" />
					<text class="iconfont iconqingchu" v-if="showClearIcon" @click="clearIcon"></text>
				</view>
				<view class="line">

				</view>

				<view class="u-f-ajc">
					<text>联系电话</text>
					<input v-model="parameter.phone" class="uni-input" placeholder="手机号码" />
				</view>
				<view class="line">

				</view>
				<view class="u-f-ajc">
					<text>选择地区</text>
					<pickerAddress class="uni-input region" @change="change">{{txt}}</pickerAddress>
					<text class="iconfont iconqianjin"></text>
				</view>
				<view class="line">

				</view>
				<view class="u-f-ajc" @tap='close'>
					<text>详细地址</text>
					<input v-model="parameter.address" class="uni-input" placeholder="详细地址" />
				</view>

				<view class="line">

				</view>
			</view>
		</view>
		<view class="searchAddress" v-show="isShow">
			<scroll-view class="scroll" show-scrollbar='false' scroll-y>
				<view class="searchAddress-info box-c" v-for='item in searchAddressList'>
					<view class="searchAddress-info-l1 box-c" @tap='chooseAddress(item.address)'>
						<text>{{item.name}}</text>
						<text>{{item.address}}</text>
					</view>

				</view>
			</scroll-view>

		</view>
		<view class="">
			<button class="button" @tap='addAddress'>保存</button>
		</view>
	</view>


</template>

<script>
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				showClearIcon: false,
				txt: '选择地区',
				parameter: {
					name: '',
					phone: '',
					cityCode: '',
					address: '',


				},
				searchAddressList: [],
				isShow: false,
				regionList: []

			}
		},
		onLoad(parameter) {
			console.log(parameter.id)
			if(parameter.id != undefined && parameter.id !=''){
				this.getAddressInfo(parameter.id)
			}
		},
		methods: {
			close(){
				this.isShow=false
			},
			getAddressInfo(id) {
				this.$api.getAddressInfo({
					id: id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(JSON.stringify(res.data.data))
						this.parameter = res.data.data
						this.txt = (res.data.data.province ==null? '': res.data.data.province)+" "+res.data.data.city+" "+res.data.data.district


					}
				})
			},
			chooseAddress(address) {
				this.isShow = false
				this.parameter.address = address.split("-")[2]

			},
			onInput(e) {
				console.log(e.detail)
				let pa = e.detail.value
				let _this = this
				setTimeout(function() {
					uni.request({
						url: 'http://api.map.baidu.com/place/v2/suggestion', //仅为示例，并非真实接口地址。
						data: { //参数
							query: pa,
							region: _this.regionList[1],
							city_limit: true,
							output: 'json',
							ak: '6dmriC1FKQLOEfAWrqp0tpOInr2QKOSf'
						},
						method: 'GET', //请求方式  或GET，必须为大写
						success: res => {
							_this.searchAddressList = res.data.result
							_this.isShow = _this.searchAddressList == '' ? false : true
							console.log('返回', JSON.stringify(res.data));
						}
					})

					console.log()
				}, 800);
			},
			addAddress() {
				if (this.parameter.name == '') {
					uni.showToast({
						title: "请输入姓名",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.phone == '') {
					uni.showToast({
						title: "手机号",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.cityCode == '') {
					uni.showToast({
						title: "请选择地区",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.address == '') {
					uni.showToast({
						title: "请输入详细地址",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if(this.parameter.id==undefined){
					this.$api.addAddress(this.parameter).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "已添加",
								duration: 1500,
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1700);
						}
					
					})
				}else{
					this.$api.updateAddress(this.parameter).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "已修改",
								duration: 1500,
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1700);
						}
					
					})
				}
				
			},
			change(data) {
				this.txt = data.data.join(' ')
				this.regionList = data.data
				this.parameter.cityCode = data.data2
				console.log(JSON.stringify(this.regionList[1]))
			},
			openMap() {

			},
			//大于0长度显示清除图标
			clearInput: function(event) {
				this.name = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			//清除图标点击
			clearIcon: function() {
				this.name = '';
				this.showClearIcon = false;
			},
		}
	}
</script>

<style scoped>
	.scroll {
		height:100%;
	}

	.searchAddress-info-l1 text:first-child {
		font-size: 28rpx;
		font-weight: 600;
	}

	.searchAddress-info-l1 text:last-child {
		font-size: 24rpx;
		color: #8f8f8f;
	}

	.searchAddress-info {
		padding: 10rpx 30rpx;
	}

	.searchAddress {
		/* max-height: 500rpx; */
		height: 400rpx;
		width: 550rpx;
		right: 10rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		position: absolute;
		z-index: 99;
		box-shadow: #bebebe 0px 0px 3px;
		-moz-box-shadow: #bebebe 0px 0px 3px;
		-webkit-box-shadow: #bebebe 0px 0px 3px;
	}

	.button {
		width: 600rpx;
		border-radius: 50rpx;
		background-color: #FF5551;
		color: #FFFFFF;
		margin-top: 40rpx;
	}

	.content button {
		color: #ffffff;
		margin-top: 60rpx;
		background-color: #FF5551;
		width: 650rpx;
		border-radius: 50rpx;

	}

	.region {
		color: #9e9e9e;
	}

	.iconqianjin {
		font-size: 28rpx;
		position: relative;
		right: -50rpx;
	}

	.line {
		background-color: #e8e8e8;
		height: 2rpx;
		border-radius: 10rpx;
		margin: 10rpx 0;
	}

	.iconqingchu {
		color: #9e9e9e;
		font-size: 34rpx;
	}

	.card text {
		width: 120rpx;
	}

	.card {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		width: 700rpx;
		margin: 0 auto;
		padding: 15rpx 30rpx;
		background-color: #FFFFFF;
	}

	.box {
		height: 100%;
		background-color: #f5f5f5;
	}

	.u-f,
	.u-f-ac,
	.u-f-ajc {
		display: flex;

	}

	.u-f-ac {
		align-items: center;
	}

	.u-f-ajc {
		justify-content: space-between;
		align-items: center;
	}
</style>
